<template>
  <div>
    <!-- 渲染换购信息列表 -->
    <div>
      <el-button type="primary" @click="show4">查看换购信息</el-button>
      <el-card v-show="isshow4">
        <!-- <el-card v-if="count == 0">暂无数据</el-card> -->
        <el-card>换购消息 <el-button type="primary" style="float: right;" round @click="refresh">刷新</el-button></el-card>
        <!-- 对方购买的 -->
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <div v-for="(item,index) in goodsList" :key="item.goodsId">
          <el-card v-if="item.goodsOwner === name && item.goodsMessage === '换购中'">
            <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
            <el-tag type="warning">您的物品{{ item.goodsName }}正在换购中,换购人:{{ item.goodsBuyer }}</el-tag>
            <el-tag type="success">订单状态:对方{{ item.goodsMessage }},可跳转至换购页面沟通</el-tag>
            <el-button round type="primary" style="float: right;" @click="exchangePage(item.goodsId,item.goodsBuyer)">去换购</el-button>
          </el-card>
          <el-card v-else-if="item.goodsOwner === name && item.goodsMessage === '换购成功'">
            <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
            <el-tag type="warning">您的物品：{{ item.goodsName }} -已经换购成功</el-tag>
            <el-tag type="success">订单状态:{{ item.goodsMessage }},可至订单页面查询详情</el-tag>
            <el-button round type="primary" style="float: right;" @click="queryPage">查看详情</el-button>
          </el-card>
        </div>
      </el-card>
    </div>
    <!-- 渲染购物列表 -->
    <div>
      <el-button type="primary" @click="show3">查看购物信息</el-button>
      <el-card v-show="isshow3">
        <!-- <el-card v-if="count == 0">暂无数据</el-card> -->
        <el-card>购物小助手 <el-button type="primary" style="float: right;" @click="refresh">刷新</el-button></el-card>
        <!-- 自己购买的 -->
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <el-card v-for="(item,index) in cartList" v-if="item.goodsBuyer === name && item.goodsMessage === '已付款'" :key="item.goodsId">
          <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
          <el-tag type="primary">您已经付款购买{{ item.goodsOwner }}的{{ item.goodsName }}</el-tag>
          <el-tag type="success">订单状态:您{{ item.goodsMessage }}</el-tag>
          <el-button type="primary" style="float: right;" @click="deleteMessage(item.goodsId)">收到并删除信息</el-button>
        </el-card>
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <el-card v-for="(item,index) in cartList" v-if="item.goodsBuyer === name && item.goodsMessage === '待付款'" :key="item.goodsId">
          <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
          <el-tag type="primary">在购物车中的{{ item.goodsName }}等您很久了~</el-tag>
          <el-tag type="success">订单状态:{{ item.goodsMessage }}</el-tag>
          <el-button type="primary" style="float: right;" @click="deleteMessage(item.goodsId)">收到并删除信息</el-button>
        </el-card>
        <!-- 对方购买的 -->
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <el-card v-for="(item,index) in goodsList" v-if="item.goodsOwner === name && item.goodsMessage === '已付款'" :key="item.goodsId">
          <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
          <el-tag type="warning">您的{{ item.goodsName }}已被{{ item.goodsBuyer }}付款购买</el-tag>
          <el-tag type="success">订单状态:对方{{ item.goodsMessage }},可在订单页面查询详细信息</el-tag>
          <el-button type="primary" style="float: right;" @click="deleteMessage2(item.goodsId)">收到并删除信息</el-button>
        </el-card>
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <el-card v-for="(item,index) in goodsList" v-if="item.goodsOwner === name && item.goodsMessage === '订单已被取消'" :key="item.goodsId">
          <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
          <el-tag type="warning">您的订单{{ item.goodsId }}已被取消</el-tag>
          <el-tag type="success">订单状态:{{ item.goodsMessage }},可在物品发布页查询详细信息</el-tag>
          <el-button type="primary" style="float: right;" @click="deleteMessage2(item.goodsId)">收到并删除信息</el-button>
        </el-card>
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <el-card v-for="(item,index) in goodsList" v-if="item.chatFlag === 1 && item.goodsFlag === 1 && item.goodsOwner === name" :key="item.goodsId">
          <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
          <el-tag type="warning">您的物品:{{ item.goodsName }}</el-tag>
          <el-tag type="success">订单状态:对方{{ item.goodsMessage }},对方想进行沟通</el-tag>
          <el-button type="primary" style="float: right;" round @click="chatPage(item.goodsId,item.goodsBuyer)">回复消息</el-button>
        </el-card>
      </el-card>
    </div>
    <!-- 渲染举报列表 -->
    <div>
      <el-button type="primary" @click="show2">查看个人举报结果</el-button>
      <el-card v-show="isshow2">
        <!-- <el-card v-if="count == 0">暂无数据</el-card> -->
        <el-card>个人举报结果 <el-button type="primary" style="float: right;" @click="refresh">刷新</el-button></el-card>
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <el-card v-for="(item,index) in userList" v-if="item.complainer === name && item.username !== name " :key="item.id">
          <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
          <el-tag type="danger">被举报者:{{ item.username }}</el-tag>
          <el-tag type="warning" style="width:200">您的举报原因:{{ item.cause }}</el-tag>
          <el-tag type="success">审核结果:{{ item.message }}</el-tag>
          <el-button type="primary" style="float: right;" @click="deleteinfo(item.id)">收到并删除信息</el-button>
        </el-card>
      </el-card>
    </div>
    <!-- 渲染被举报列表 -->
    <div>
      <el-button type="primary" @click="show">查看最近您被人举报的情况</el-button>
      <el-card v-show="isshow">
        <!-- <el-card v-if="count == 0">暂无数据</el-card> -->
        <el-card>最近您被人举报的情况 <el-button type="primary" style="float: right;" @click="refresh">刷新</el-button></el-card>
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <el-card v-for="(item,index) in userList" v-if="item.complainer !== '无' && item.username === name" :key="item.id">
          <el-tag style="margin-left: -10px;">{{ index }}</el-tag>
          <el-tag type="danger">举报者:{{ item.complainer }}</el-tag>
          <el-tag type="warning" style="width:200">他的举报原因:{{ item.cause }}</el-tag>
          <el-tag type="success">审核结果:{{ item.message }}</el-tag>
          <el-button type="primary" style="float: right;" @click="deleteinfo2(item.id)">收到并删除信息</el-button>
        </el-card>
      </el-card>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import userApi from '@/api/userManage'
import goodsApi from '@/api/goodsManage'
import cartApi from '@/api/cartManage'
export default {
  data() {
    return {
      userList: [],
      goodsList: [],
      cartList: [],
      goodsFrom: {},
      cartFrom: {},
      userFrom: {},
      userId: 0,
      isshow: false,
      isshow2: false,
      isshow3: false,
      isshow4: false
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  beforeUpdate() {
    // setTimeout(this.getAllCart, 3000)

  },
  created() {
    this.getAllUser()
    this.getAllGoods()
    this.getAllCart()
  },
  methods: {
    queryPage() {
      this.$router.push('/shopping/query')
    },
    chatPage(goodsId, Buyerusername) {
      userApi.getUserIdByUsername(Buyerusername).then(response => {
        this.userId = response.data
        console.log(this.userId)
        console.log(goodsId)
        const routeData = this.$router.resolve({ path: '../shopping/chat', query: { userId: this.userId, goodsId: goodsId }})
        window.open(routeData.href, '_blank')
      })
    },
    exchangePage(goodsId, Buyerusername) {
      userApi.getUserIdByUsername(Buyerusername).then(response => {
        this.userId = response.data
        console.log(this.userId)
        console.log(goodsId)
        const routeData = this.$router.resolve({ path: '../shopping/exchange', query: { userId: this.userId, goodsId: goodsId }})
        window.open(routeData.href, '_blank')
      })
    },
    refresh() {
      setTimeout(() => {
        this.getAllUser()
        this.getAllGoods()
        this.getAllCart()
      }, 50)
    },
    deleteMessage(id) {
      this.$confirm(`是否删除该条信息 ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功删除该条信息!'
        })
        cartApi.getCartById(id).then(response => {
          this.cartFrom = response.data
          this.$set(this.cartFrom, 'goodsMessage', '无')
          cartApi.updateCart(this.cartFrom)
          setTimeout(this.getAllCart, 1000)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    deleteMessage2(id) {
      this.$confirm(`是否删除该条信息 ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功删除该条信息!'
        })
        goodsApi.getGoodsById(id).then(response => {
          this.goodsFrom = response.data
          this.$set(this.goodsFrom, 'goodsMessage', '无')
          goodsApi.updateGoods(this.goodsFrom)
          setTimeout(this.getAllGoods, 1000)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    deleteinfo(id) {
      this.$confirm(`是否删除该条信息 ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功删除该条信息!'
        })
        userApi.getUserById(id).then(response => {
          this.userFrom = response.data
          this.$set(this.userFrom, 'complainer', '匿名')
          userApi.updateUser(this.userFrom)
          setTimeout(this.getAllUser, 1000)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    deleteinfo2(id) {
      this.$confirm(`是否删除该条信息 ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功删除该条信息!'
        })
        userApi.getUserById(id).then(response => {
          this.userFrom = response.data
          this.$set(this.userFrom, 'complain', 0)
          this.$set(this.userFrom, 'complainer', '无')
          this.$set(this.userFrom, 'cause', '无')
          this.$set(this.userFrom, 'message', '无')
          userApi.updateUser(this.userFrom)
          setTimeout(this.getAllUser, 1000)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getAllUser() {
      userApi.getAllUser().then(response => {
        this.userList = response.data
        console.log(this.userList)
      })
    },
    getAllGoods() {
      goodsApi.getAllGoods().then(response => {
        this.goodsList = response.data
        console.log(this.goodsList)
      })
    },
    getAllCart() {
      cartApi.getAllCart().then(response => {
        this.cartList = response.data
        console.log(this.cartList)
      })
    },
    show() {
      this.isshow = !this.isshow
    },
    show2() {
      this.isshow2 = !this.isshow2
    },
    show3() {
      this.isshow3 = !this.isshow3
    },
    show4() {
      this.isshow4 = !this.isshow4
    }
  }
}
</script>

<style scoped>
.el-button{
  margin: 5px;
}
</style>
